Progress = {
  //显示进度条
  show: function (width) {
    let _this = this;
    _this.width = width;
    //判断页面是否有进度条div
    if ($("#progress-div").length > 0) {
      $(".progress").attr("data-percent", width);
      //如果进度条存在，只修改值
      $(".progress-bar").width(width + "%");
    } else {
      //没有显示，构造div，append到body标签
      let progressDiv = "<div id=\"progress-div\" style=\"z-index: 10011;\n" +
        "    position: fixed;\n" +
        "    padding: 10px;\n" +
        "    margin: 0px 0px 0px -50px;\n" +
        "    width: 600px;\n" +
        "    top: 40%;\n" +
        "    left: 50%;\n" +
        "    text-align: center;\n" +
        "    height: 60px;\n" +
        "    color: rgb(0, 0, 0);\n" +
        "    border: 10px solid rgb(170, 170, 170);\n" +
        "    background-color: rgb(255, 255, 255);\n" +
        "    cursor: wait;\"><div class=\"progress pos-rel\" data-percent=\"" + width + "%\"><div class=\"progress-bar\"></div></div></div>";
      $("#progress-div").remove();
      $("body").append(progressDiv);

      // 背景遮罩
      $("body").append($("<div id=\"progress-overlay\" style=\"z-index: 10010;\n" +
        "  border: none;\n" +
        "  margin: 0px;\n" +
        "  padding: 0px;\n" +
        "  width: 100%;\n" +
        "  height: 100%;\n" +
        "  top: 0px;\n" +
        "  left: 0px;\n" +
        "  background-color: rgb(0, 0, 0);\n" +
        "  opacity: 0.6;\n" +
        "  cursor: wait;\n" +
        "  position: fixed;\"></div>"));
      $(".progress-bar").width(width + "%");
    }

  },
  //关闭进度条，上传到100%需要延迟1秒，如果不延迟直接关闭，用户看不到100%影响体验
  hide: function () {
    setTimeout(function () {
      $("#progress-div").remove();//进度条
      $("#progress-overlay").remove();//背景遮罩
    }, 1500);
  }
};
